<template>
    <fieldset>
        <legend>产品</legend>
        <h1>{{$store.state.Product.tag}}</h1>
        <ul>
            <li v-for="item in products" :key="item.id">
                <span>产品名称：</span>
                <b>{{item.title}}</b>
                ===
                <span>产品单价：</span>
                <b>{{item.price}}</b>
                ===
                <span>库存：</span>
                <b>{{item.inventory}}</b>
                ===
                <button :disabled='item.inventory==0' @click="add_to_cart(item)">点击加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
    // 引入辅助函数
    import { mapActions,mapState,mapMutations } from "vuex"
    export default {
        mounted(){
            // this.$store.commit("Product/SET_PRODUCT")
            this['Product/FETCH_PRODUCT']()
        },
        computed:{  // 映射Product模块中products状态
            ...mapState('Product', ['products'])
        },
        methods:{   
            // 调用Product模块中的action
            ...mapActions(['Product/FETCH_PRODUCT','Cart/GET_PRODUCT']),
            // Product模块中mutation
            // ...mapMutations('Product',['DECREMENT__INVENTORY']),
            // 触发的Cart模块
            add_to_cart(item){
                this['Cart/GET_PRODUCT'](item);
                // this.DECREMENT__INVENTORY(item)
            }
        }
    }
</script>